body {
    display       : flex;
    flex-direction: column;

    main {
        overflow-y: scroll;
        padding   : 0px 15px 15px;
        flex      : 1;

        .swiper-container {
            height: 200px;

            .slide-1 {
                background         : url(../imgs/index-swiper-bg1.jpg) no-repeat;
                background-size    : cover;
                background-position: center;
            }

            .slide-2 {
                background         : url(../imgs/index-swiper-bg2.jpg) no-repeat;
                background-size    : cover;
                background-position: center;
            }

            .slide-3 {
                background         : url(../imgs/index-swiper-bg3.jpg) no-repeat;
                background-size    : cover;
                background-position: center;
            }
        }

        .one {
            display   : flex;
            height    : 150px;
            margin-top: 20px;

            .ranking {
                flex               : 2;
                background         : url(../imgs/index-card-rank.png) no-repeat;
                background-position: -18px 15px;
                background-size    : 121px 121px;
                background-color   : #1592CC;
                border-radius      : 15px;
                margin-right       : 22px;

                .p1 {
                    margin-left: 14px;
                    margin-top : 15px;
                    font-weight: bold;
                }

                .p2 {
                    font-size   : 80px;
                    color       : #fff;
                    text-align  : right;
                    margin-right: 15px;
                }
            }

            .punch {
                flex               : 3;
                background         : url(../imgs/index-card-sum.png) no-repeat;
                background-size    : 110px 110px;
                background-position: 10px 28px;
                background-color   : #7BCBF5;
                position           : relative;
                border-radius      : 15px;

                .p1 {
                    margin-left: 14px;
                    margin-top : 15px;
                    font-weight: bold;
                }

                div {
                    border-radius: 20px;
                    width        : 100px;
                    height       : 40px;
                    border       : 3px solid;
                    text-align   : center;
                    line-height  : 34px;
                    position     : absolute;
                    right        : 15px;
                    bottom       : 25px;
                }

                div.punched {
                    border          : 3px solid orange;
                    background-color: orange;
                }
            }
        }

        .two {
            height    : 110px;
            margin-top: 20px;
            display   : flex;

            .moveData {
                flex           : 1;
                background     : url(../imgs/index-card-data.png) no-repeat center;
                background-size: cover;
                border-radius  : 15px;
                color          : #fff;
                display        : flex;

                span {
                    margin-left: 15px;
                    margin-top : 15px;
                    font-size  : 14px;
                }
            }

            .badge {
                flex               : 1;
                margin-left        : 20px;
                background         : url(../imgs/index-card-badge.png) no-repeat;
                background-size    : 100px 100px;
                background-position: 0 10px;
                background-color   : #9DBDE3;
                border-radius      : 15px;

                h5 {
                    margin-left: 15px;
                    margin-top : 15px;
                }

                p {
                    margin-right: 10px;
                    text-align  : right;

                    .num {
                        font-size  : 64px;
                        font-weight: bold;
                    }
                }
            }
        }

        .three {
            margin-top         : 20px;
            height             : 110px;
            background         : url(../imgs/course-img04.jpg) no-repeat;
            background-size    : cover;
            background-position: 0 -25px;
            border-radius      : 15px;
            display            : flex;

            h5 {
                color : #fff;
                margin: 15px 0px 0px 15px;
            }
        }

        .four {
            margin-top     : 20px;
            height         : 110px;
            background     : url(../imgs/index-card-run.png) no-repeat center;
            background-size: cover;
            border-radius  : 15px;
            display        : flex;

            h5 {
                margin-top : 15px;
                margin-left: 15px;
                color      : #fff;
            }
        }
    }
}